<template>
  <div class="root">
    <w-my-pwd v-model:open="open.pwd"></w-my-pwd>
    <w-my-update v-model:open="open.update"></w-my-update>
    <header class="admin-header">
      <div>管理后台</div>
      <div>
        <el-icon size="1rem" style="transition: all 0.3s" :class="{ collapse: collapse }" @click="collapse = !collapse">
          <DArrowLeft />
        </el-icon>
      </div>
      <div>

        <el-dropdown @command="doUserMenu">
          <span class="el-dropdown-link">
            <img :size="36" :src="store.user.userImg" />
            {{ store.user.userName }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="myUpdate">修改个人基本信息</el-dropdown-item>
              <el-dropdown-item command="myPwd">修改个人登录密码</el-dropdown-item>
              <el-dropdown-item divided command="exit">安全退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>
    <div class="admin-body">
      <div>
        <el-scrollbar height="100%" :style="{ width: collapse ? '64px' : 'var(--admin-menu-width)' }">
          <el-menu @select="doMenu" :collapse="collapse" unique-opened router :default-active="$route.path"
            class="left-menu">
            <el-menu-item index="/admin">
              <el-icon>
                <Discount />
              </el-icon>
              <span>欢迎页</span>
            </el-menu-item>
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <Setting />
                </el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item index="/admin/role">角色管理</el-menu-item>
              <el-menu-item index="/admin/user">用户管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <User />
                </el-icon>
                <span>内容管理</span>
              </template>
              <el-menu-item index="/admin/cms/article">文章管理</el-menu-item>
              <el-menu-item index="/admin/cms/article-type">分类管理</el-menu-item>
              <el-menu-item index="/admin/cms/page">单页管理</el-menu-item>
              <el-menu-item index="/admin/cms/link">链接管理</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </div>
      <div>
        <el-breadcrumb style="padding: 1rem" :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/admin' }">管理后台</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider style="margin: 0"></el-divider>
        <div style="height: calc(100% - 48px)">
          <el-scrollbar>
            <Transition name="fade" mode="out-in">
              <router-view></router-view>
            </Transition>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

import WMyUpdate from '@/components/WMyUpdate.vue';
import WMyPwd from '@/components/WMyPwd.vue';

import { userStore } from "../store/user";
/**
 * 全局用户数据仓库
 */
const store = userStore();
/**
 * 路由
 */
const $router = getCurrentInstance().proxy.$router;

/**
 * 菜单是否折叠
 */
const collapse = ref(false);

/**
 * 做菜单处理事件
 */
const doMenu = function (...args) {
  console.debug(args);
};

/**
 * 顶部下拉菜单点击处理
 * @param {String} command 点击的命令
 */
const doUserMenu = (command) => {
  doUserMenus[command]();
}
const open = ref({update:false,pwd:false});
const doUserMenus = {
  exit() {
    // alert("退出");
    ElMessageBox.confirm("您确定要退出本系统吗?", "退出确认")
      .then(() => {
        store.logout();
        ElMessage.success("成功退出");
        $router.push("/");
      });
  },
  myUpdate() {
    // alert("更新个人资料");
    open.value.update=true;
  },
  myPwd() {
    // alert("修改登录密码");
    open.value.pwd=true;
  }
}
</script>

<style scoped>
.root {
  /* 顶部高度 */
  --admin-header-height: 50px;
  /* 顶部背景颜色 */
  --admin-header-bg-color: var(--el-color-primary);
  /* 顶部文字颜色 */
  --admin-header-text-color: var(--el-color-white);
  /* 左边菜单宽度 */
  --admin-menu-width: 200px;
  /* 左边菜单背景颜色*/
  --admin-menu-bg-color: #333;
  /* 左边菜单文字颜色 */
  --admin-menu-text-color: #FFF;
  /* 左边菜单hover背景颜色 */
  --admin-menu-hover-bg-color: #444;
  /* 左边菜单激活文字颜色 */
  --admin-menu-active-text-color: var(--admin-header-bg-color);
}

.root * {
  box-sizing: border-box;
}

.admin-header .el-dropdown-link>img {
  border-radius: var(--admin-header-height);
  width: calc(var(--admin-header-height) - .5rem);
  height: calc(var(--admin-header-height) - .5rem);
  background-color: #FFF;
  border: .1rem solid #fff;
  object-fit: cover;
  object-position: center center;
  margin-right: .5rem;
  overflow: hidden;

}

.admin-header .el-dropdown-link {
  display: inline-flex;
  align-items: center;
  color: var(--admin-header-text-color);
  font-size: 1rem;
}

.admin-header {
  height: var(--admin-header-height);
  display: grid;
  gap: 0;
  grid-template-columns: var(--admin-menu-width) var(--admin-header-height) 1fr;
  background-color: var(--admin-header-bg-color);
  color: var(--admin-header-text-color);
  line-height: var(--admin-header-height);
}

.admin-body {
  display: flex;
  height: calc(100vh - var(--admin-header-height));
  transition: all 0.3s;
}

.admin-body>div {
  transition: all 0.3s;
}

.collapse {
  transform: rotate(180deg);
}

.admin-body> :nth-child(2) {
  flex-grow: 1;
}

.admin-header> :nth-child(1) {
  text-align: center;
  line-height: var(--admin-header-height);
  font-weight: bold;
  font-size: 1.2rem;
}

.admin-header> :nth-child(2) {
  display: flex;
  align-items: center;

}

.admin-header> :nth-child(2)>* {
  cursor: pointer;
}

.admin-header> :nth-child(3) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1rem;
}

.left-menu {
  min-height: calc(100vh - var(--admin-header-height));
  --el-menu-bg-color: var(--admin-menu-bg-color);
  --el-menu-text-color: var(--admin-menu-text-color);
  --el-menu-hover-bg-color: var(--admin-menu-hover-bg-color);
  --el-menu-active-color: var(--admin-menu-active-text-color);
}
</style>